<template>
	<view class="travel_bus_list">
		<view class="top-wrap">
			<view class="date-wrap">
				<text class="btn" :class="{disable: dateFull===today}" @click="handleChangeDate('pre')">前一天</text>
				<view class="calendar-wrap" @click="handleChooseDate('go')">
					<view class="calendar-icon">
						<image src="@/static/imgs/icons/calendar-icon.png" mode=""></image>
					</view>
					<text>{{date}}</text>
				</view>
				<text class="btn" @click="handleChangeDate('next')">后一天</text>
			</view>
			<view class="nav_ul">
				<!-- <view class="nav_li" :class="{active: curNav==='all'}" @click="handleSwitchNav('all')">出发时间</view> -->
				<view class="nav_li" :class="{active: curNav==='all'}" @click="selecTime">出发时间</view>
				<view class="nav_li" :class="{active: curNav!=='all'}" @click="handleSwitchNav('price')">
					<view class="li_price">
						<view>价格</view>
						<view v-if="priceStatus==='up'" class="icon">
							<image src="@/static/imgs/icons/price-down-icon.png" mode=""></image>
						</view>
						<view v-else class="icon">
							<image src="@/static/imgs/icons/price-up-icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bus_list" v-if="list.length">
			<view class="bus_item" v-for="(item,index) in list" :key="index" @click="handleGoBusOrder(item)">
				<view class="l-wrap">
					<text class="time">{{item.startTime}}</text>
					<view class="bus-icon">
						<image src="@/static/imgs/icons/bus-icon.png" mode=""></image>
					</view>
					<text class="bus_type">{{item.shiftsCartype}}</text>
				</view>
				<view class="r-wrap">
					<view class="address-wrap">
						<view class="step-wrap">
							<view class="dot dot_from"></view>
							<view class="dot dot_to"></view>
						</view>
						<text class="from ellispsis1">{{item.startStation}}</text>
						<text class="to ellispsis1">{{item.arriveStation}}</text>
						<view class="time-wrap">
							<view class="time-icon">
								<image src="@/static/imgs/icons/time-icon.png" mode=""></image>
							</view>
							<text class="time">预计到达时间：{{item.arriveTime}}</text>
						</view>
					</view>
					<view class="ticket-wrap">
						<view class="ticket">
							<view class="price">￥{{item.linePrice}}</view>
							<view v-if="item.status ==  0" class="num">余{{item.lastNumber}}张</view>
							<view v-if="item.status ==  1" class="num">暂停售票</view>
							<view v-if="item.status ==  2" class="num">无票</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<NoData v-else />
		<view class="fab_btn-wrap" @click="goToFWb(4,'出行攻略')">
			<image src="../static/imgs/icons/fab-icon.png" mode="aspectFill"></image>
		</view>

	</view>
</template>

<script>
	import NoData from '../components/common/common-noDate.vue'
	import calendar from '@/components/tp-calendar/util.js'
	export default {
		components: {
			NoData
		},
		data() {
			return {
				choosedDateObj: {}, // 选择出行时间
				choosedAddressObj: {}, // 选择地址信息
				dateFull: '', // 2020-05-19
				date: '', // 05月21日 周四
				list: [],
				curNav: 'price',
				priceStatus: 'up',
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 10,
				},
				today: '',
				ticketId: 0, //  车票ID'' 正常 有值改签
				delayDay: 0, // // 默认可以选择几天后的日期
				type: 0, // 出发时段 	0不限   1.0-6  2.6-12  3.12-18 4.18-24 . 搜索的时间段. 默认是0
				// #ifdef H5
				durationDay: 100800, //小时 可以选择多少天内的 60天
				// #endif
				trlineid:0
			};
		},
		onLoad(opt) {
			console.log(opt);
			this.trlineid = uni.getStorageSync('trlineid')
			this.delayDay = opt && opt.delayDay
			this.initDate()
			if (opt.ticketId) {
				this.ticketId = opt && opt.ticketId
			} else {
				this.ticketId = ''
			}
		},
		onShow() {
			this.page.pageNum = 1
			this.updateChoosedDate()
			this.getChoosedAddress()
		},
		onReachBottom() {
			let totalPage = Math.ceil(this.page.totalPageNum / this.page.pageSize)
			if (this.page.pageNum >= totalPage) return
			this.page.pageNum++
			this.getBusList()
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.getBusList()
		},
		methods: {
			// 选择出发时间
			selecTime() {
				const _this = this
				uni.showActionSheet({
					itemList: ['不限', '00:00-06:00', '06:00-12:00', '12:00-18:00', '18:00-24:00'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						_this.page.pageNum = 1
						_this.type = res.tapIndex
						_this.getBusList()
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			getToday() {
				const date = new Date()
				const y = date.getFullYear()
				let m = String(date.getMonth() + 1).padStart(2, '0')
				const d = String(date.getDate()).padStart(2, '0')
				const str = y + '-' + m + '-' + d
				this.today = str
			},
			handleChangeDate(sts) {
				let date = this.dateFull
				if (sts === 'pre') {
					if (this.dateFull === this.today) {
						return
					}
					date = calendar.getBeforeDate(date, -24)
				} else if (sts === 'next') {
					date = calendar.getBeforeDate(date, 24)
				}
				this.dateFull = date
				this.date = this.formatDate(date)
				let dateObj = calendar.getDateObj(date)
				console.log(dateObj);
				let {
					year,
					month,
					day,
					week
				} = dateObj
				this.handleChooseDay({day,disable:false,disabled:false,full:date,month,year})
				this.page.pageNum = 1
				this.getBusList()
			},
			// 选择更新时间
			handleChooseDay(item) {
				// console.log(item); // 选择的时间  2020-10-11 
				// if (this.goOrBack === 'go') {
					let selectDate = calendar.transdate(item.full) // 选择的时间  //  2020-10-11   ===> 时间戳
					let back_aa = this.$store.getters.getHomeChoosedDateObj.back_full // 返程的时间  2020-10-12
					if (back_aa) {
						let backDate = calendar.transdate(this.$store.getters.getHomeChoosedDateObj.back_full)
						if (selectDate > backDate) { // 选择的时间 大于 返程的时间  
							this.$store.commit('upHomeChoosedDateObj', {
								back: item.month + '月' + item.day + '日',
								back_full: item.full,
								back_obj: item
							});
						}
					} else { // 没有返程时间  更新返程时间
						this.$store.commit('upHomeChoosedDateObj', {
							back: item.month + '月' + item.day + '日',
							back_full: item.full,
							back_obj: item
						});
					}
			
				// }
				let key = 'go'
				let key_full ='go_full'
				let key_obj = 'go_obj'
				let chooesedTime = {
					[key]: item.month + '月' + item.day + '日',
					[key_full]: item.full,
					[key_obj]: item
				};
				this.$store.commit('upHomeChoosedDateObj', chooesedTime);
				// this.curChoosedDayObj = item
				// let date = calendar.getDateObj(this.curChoosedDayObj.full)
				
			},
			// 选择日期
			handleChooseDate(sts) {
				uni.navigateTo({
					// #ifdef MP-WEIXIN
					url: '../pages/others/calendar?sts=' + sts + '&delayDay=' + this.delayDay + '&choosedDay=' + this.dateFull
					// #endif
					// #ifdef H5
					url: '../pages/others/calendar?sts=' + sts + '&delayDay=' + this.delayDay + '&choosedDay=' + this.dateFull+ '&durationDay=' + this.durationDay
					// #endif
				})
			},
			handleSwitchNav(it) {
				if (it === 'price' && this.priceStatus === 'up' && this.curNav === 'price') {
					this.priceStatus = 'down'
				} else if (it === 'price' && this.priceStatus === 'down' && this.curNav === 'price') {
					this.priceStatus = 'up'
				}
				this.curNav = it
				this.page.pageNum = 1
				this.getBusList()
			},
			// 买票去订单
			handleGoBusOrder(item) {
				if (item.status == 1) {
					return uni.showToast({
						title: '暂停售票',
						icon: 'none'
					})
				}
				if (item.status == 2) {
					return uni.showToast({
						title: '已售罄',
						icon: 'none'
					})
				}
				if (this.ticketId != '') { // 改签去订单
					uni.navigateTo({
						url: '../pages/order/change-order?ticketId=' + this.ticketId + '&busInfo=' + JSON.stringify(item)
					});
				} else {
					uni.navigateTo({
						url: '../pages/order/bus.order?busInfo=' + JSON.stringify(item)
					});
				}

			},
			updateChoosedDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				if (!this.choosedDateObj.go) return
				let obj = this.choosedDateObj;
				this.$set(this.choosedDateObj, 'go', obj.go);
				this.$set(this.choosedDateObj, 'back', obj.back);
				this.date = this.formatDate(obj.go_full)
				this.dateFull = obj.go_full
			},
			initDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj
				let {
					year,
					month,
					day
				} = this.choosedDateObj.go_obj || calendar.getDateObj()
				let date = year + '-' + month + '-' + day
				this.dateFull = date
				this.date = this.formatDate(date)
				this.getToday()
			},
			
			// 获取地址信息
			getChoosedAddress() {
				this.choosedAddressObj = this.$store.getters.getHomeChoosedAddressObj
				this.getBusList()
			},
			// 获取班车列表信息
			getBusList() {
				let beginStation, endStation;
				beginStation = this.choosedAddressObj.from && this.choosedAddressObj.from.id
				endStation = this.choosedAddressObj.to && this.choosedAddressObj.to.id

				// this.page.pageNum = 1
				const goTime = this.dateFull
				const orderBy = this.priceStatus === 'up' ? 'asc' : 'desc'
				const pageSize = this.page.pageSize
				const pageNum = this.page.pageNum
				const type = this.type
				if (this.ticketId != '') { // 如果是改签
					this.$http.get(this.$api.toGaiQian, {
						ticketId: this.ticketId,
						goTime,
						pageSize,
						pageNum
					}).then(res => {
						this.page.totalPageNum = res.data.total
						if(this.page.pageNum > 1){
							this.list = this.list.concat(res.data.result)
						}else {
							this.list = res.data.result
							uni.pageScrollTo({
							    scrollTop: 0,
							    duration: 300
							});
						}
					})
				} else {
					this.$http.get(this.$api.getBusList, {
						beginStation: beginStation,
						endStation: endStation,
						regularType:this.trlineid,
						goTime,
						orderBy,
						pageSize,
						pageNum,
						type
					}).then(res => {
						uni.stopPullDownRefresh()
						if (res.code === 200) {
							this.page.totalPageNum = res.data.total
							if(this.page.pageNum > 1){
								this.list = this.list.concat(res.data.result)
							}else {
								this.list = res.data.result
								uni.pageScrollTo({
								    scrollTop: 0,
								    duration: 300
								});
							}
							// if (this.list.length == 0) {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: '今日无班次',
							// 		duration: 500
							// 	});
							// 	setTimeout(() => {
							// 		uni.navigateBack({
							// 			delta: 1
							// 		})
							// 	}, 1000)
							// }
						}
					})
				}
			},
			formatDate(date) {
				let dateObj = calendar.getDateObj(date)
				let {
					year,
					month,
					day,
					week
				} = dateObj
				switch (week) {
					case 0:
						week = '周日'
						break
					case 1:
						week = '周一'
						break
					case 2:
						week = '周二'
						break
					case 3:
						week = '周三'
						break
					case 4:
						week = '周四'
						break
					case 5:
						week = '周五'
						break
					case 6:
						week = '周六'
						break
				}
				return month + '月' + day + '日' + ' ' + week
			},
			//去富文本页面
			goToFWb(type, name) {
				uni.navigateTo({
					url: '/pages/others/depositRule?type=' + type + '&name=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrap {
		background-color: #fff;
		font-size: 30rpx;
		position: sticky;
		position: -webkit-sticky;
		z-index: 9;
		top: 0;

		.date-wrap {
			height: 88rpx;
			padding: 0 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;

			.calendar-wrap {
				width: 260rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				background: #F5F5F5;
				border-radius: 12rpx;

				.calendar-icon {
					height: 28rpx;
					width: 28rpx;
				}
			}

			.btn {
				font-size: 28rpx;
				color: #666;

				&.disable {
					color: #999;
				}
			}
		}

		.nav_ul {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-bottom: 1px solid #f5f5f5;

			.nav_li {
				display: flex;
				flex: 1;
				justify-content: space-evenly;
				align-items: center;

				&.active {
					color: $blue;
				}

				.icon {
					width: 24rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

				.li_price {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.bus_list {
		.bus_item {
			padding: 40rpx 30rpx;
			display: flex;
			background-color: #fff;
			margin: 20rpx 0 0;

			.l-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				margin-right: 50rpx;

				.time {
					font-size: 36rpx;
					font-weight: bold;
				}

				.bus-icon {
					height: 40rpx;
					width: 40rpx;
					padding: 20rpx 0;
				}

				.bus_type {
					font-size: 24rpx;
					color: #999;
				}
			}

			.r-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;

				.address-wrap {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;

					.step-wrap {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						height: 90rpx;
						position: absolute;
						top: 10rpx;
						left: 0rpx;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							height: 100%;
							width: 1px;
							background-color: #ccc;
						}

						.dot {
							height: 20rpx;
							width: 20rpx;
							border: 1px solid #ccc;
							border-radius: 50%;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								height: 100%;
								width: 100%;
								border-radius: 50%;
								background-color: #fff;
							}
						}
					}

					.from,
					.to {
						padding-left: 44rpx;
					}

					.time-wrap {
						font-size: 24rpx;
						color: #999;
						font-weight: normal;
						display: flex;
						align-items: center;

						.time-icon {
							height: 24rpx;
							width: 24rpx;
							margin-right: 15rpx;
						}
					}
				}

				.ticket-wrap {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					font-size: 24rpx;
					text-align: right;
					// width: 100rpx;

					.price {
						font-weight: bold;
						color: #FF4A37;
						font-size: 34rpx;
					}

					.num {
						font-weight: normal;
						color: #999;
						margin-top: 19rpx;
					}
				}
			}
		}
	}

	.fab_btn-wrap {
		height: 88rpx;
		width: 88rpx;
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		z-index: 9;
	}
</style>
